<template>
    <el-dialog v-model="showDialog" :title="props.type=='add'?'添加用户':'修改用户'" @close="close" style="width: 30%">
            <el-form ref="dataForm" :rules="rules" :model="form" label-width="100px" align="center">
                <el-form-item label="品牌名" prop="name">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="显示状态" prop="showStatus">
                    <el-switch
                            v-model="form.showStatus"
                            inline-prompt
                            :active-value="1"
                            :inactive-value="0"
                            active-text="是"
                            inactive-text="否"
                            @change = changeStatus
                    />
                </el-form-item>
                <el-form-item label="检索首字母" prop="firstLetter">
                    <el-input v-model="form.firstLetter" />
                </el-form-item>
                <el-form-item label="介绍" prop="descript">
                    <el-input v-model="form.descript" type="textarea" resize="none" />
                </el-form-item>
                <el-form-item  label="排序" prop="orgName">
                    <el-input v-model="form.sort" type="sort"/>
                </el-form-item>
                <UploadFile @uploadSuccess="uploadSuccess" type="brand" />
                <el-image v-if="props.type=='edit' || uploadSuccess"
                          style="width: 100px; height: 100px"
                          :preview-src-list="[form.logo]"
                          :src="form.logo" fit="fill" :preview-teleported="true" />
                <el-form-item>
                    <el-button v-show='props.type=="add"' type="primary" @click="add">添加</el-button>
                    <el-button v-show="props.type=='edit'" type="primary" @click="updateThis">更新</el-button>
                    <el-button @click="close" type="primary" >取消</el-button>
                </el-form-item>
            </el-form>
    </el-dialog>
</template>

<script setup>
    import {ref,reactive,onBeforeUpdate,onUpdated} from 'vue'
    import MySelectOption from '@/components/common/MySelectOption.vue'
    import UploadFile from '@/components/common/UploadFile.vue'
    import request from '@/utils/request.js'
    import { ElMessage } from 'element-plus'

    let dataForm = ref(null)
    const  emits = defineEmits(['close','reload'])
    const rules = reactive({
        name: [{ required: true, message: '请输入用户名', trigger: 'blur' },],
        showStatus: [{required: true,message: '请选择性别', trigger: 'blur'},],
        nickName: [{required: true,message: '请输入昵称', trigger: 'blur'},],
        firstLetter: [{required: true,message: '请输入地址', trigger: 'blur'},],
        descript: [{required: true,message: '请选择机构', trigger: 'blur'},],
    })
    let props = defineProps(['open','type','id'])
    let allOrgs = reactive([])
    let orgName = ref()
    let showDialog = ref(false)
    let form = reactive({})

    onUpdated(function () {

    if(showDialog.value == true){
        if(allOrgs.length === 0){
            request.get(`/api/common/getAllOrgTrees`).then(resp => {
                allOrgs.push(...resp)
            })
        }
        if(props.type=='edit'){
            request.get(`/api/pmsBrand/getPmsBrand/${props.id}`).then(resp => {
                for(let key in resp){
                     form[key] = resp[key]
                }
                orgName.value = form['orgName']
            })
        }else if(props.type=="add"){
            for(let key in form){
                delete form[key]
            }
         }
      }

    })

    function close(){
        showDialog.value = false
        dataForm.value.resetFields()//重置表单校验
    }

    function add(){
        dataForm.value.validate((valid, fields)=>{
            if(valid) {
                request.post("/api/pmsBrand/add", form).then(resp => {
                    close()
                    emits("reload")
                    ElMessage({message: '添加成功！', type: 'success'})
                })
            }else{
                ElMessage({message: '缺少必填项！',type: 'error'})
            }
        })
    }
    function updateThis(){
        dataForm.value.validate((valid, fields)=>{
            if(valid) {
                request.post("/api/pmsBrand/update", form).then(resp => {
                    close()
                    emits("reload")
                    ElMessage({message: '修改成功！',type: 'success'})
                })
            }else{
                ElMessage({message: '缺少必填项！',type: 'error'})
            }
        })
    }
    function handleNodeClick (node){
        form.orgId = node.value
        form.orgName = node.label
    }

    function changeStatus (status){
        form.showStatus = status
    }
    function uploadSuccess (logoUrl){
        form.logo = logoUrl
    }

    defineExpose({showDialog})
</script>

<style scoped>

</style>